<template>
  <div class="page-login" >
    <div class="page-login--layer page-login--layer-area">
      <ul class="circles">
        <li v-for="n in 10" :key="n"></li>
      </ul>
    </div>
    <div class="page-login--layer page-login--layer-time">{{time}}</div>
    <div class="page-login--content">
      <div class="page-login--content-main">
        <div class="page-login--form">
          <el-form
            ref="loginForm"
            label-position="top"
            :rules="rules"
            :model="formLogin"
            size="default"
          >
            <el-form-item prop="username">
              <el-input type="text" v-model="formLogin.username" placeholder="用户名">
                <i slot="prepend" class="fa fa-user-circle-o el-icon-user"></i>
              </el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input type="password" v-model="formLogin.password" placeholder="密码">
                <i slot="prepend" class="fa fa-keyboard-o el-icon-lock"></i>
              </el-input>
            </el-form-item>
            <el-button size="default" @click.enter="submit" type="primary" @keyup.enter.native="submit"  class="button-login">登录</el-button>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import dayjs from "dayjs";
import api from "api";
import { createNamespacedHelpers } from "vuex";
const { mapActions, mapMutations } = createNamespacedHelpers("admin");
export default {
  data() {
    return {
      timeInterval: null,
      time: dayjs().format("HH:mm:ss"),
      // 表单
      formLogin: {
        username: "",
        password: ""
      },
      // 表单校验
      rules: {
        username: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur"
          }
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur"
          }
        ],
        code: [
          {
            required: true,
            message: "请输入验证码",
            trigger: "blur"
          }
        ]
      }
    };
  },
  mounted() {
    this.timeInterval = setInterval(() => {
      this.refreshTime();
    }, 1000);
  },
  beforeDestroy() {
    clearInterval(this.timeInterval);
  },
  methods: {
    ...mapActions(["login"]),
    ...mapMutations(["setUserInfo"]),
    refreshTime() {
      this.time = dayjs().format("HH:mm:ss");
    },
    // 提交登录信息
    submit() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.login(this.formLogin).then(res => {
            // 重定向对象不存在则返回顶层路径
            this.setUserInfo(res);
            this.$router.push({ name: "admin" });
            localStorage.setItem("Authorization", res.token);
            localStorage.setItem("userInfo", JSON.stringify(res));
            localStorage.setItem("user_id", JSON.stringify(res.user_id));
            const jwt = localStorage.getItem("Authorization") || "noToken";
            api.defaults.headers.Authorization = `Bearer ${jwt}`;
          });
        } else {
          // 登录表单校验失败
          // this.$message.error("表单校验失败，请检查");
        }
      });
    }
  }
};
</script>

<style lang="scss">
@import "./style.scss";
</style>
